<template>
	<el-card style="height: 100%;">
		<!-- 
		 发布服务
		 -->
		<el-button id="but1" size="small" type="primary" round @click="addServicedialog = true">发布服务</el-button>
		<div>
			<!-- 通过商家名和服务项目,服务分类查询服务 -->
			<el-form :inline="true" :model="serviceform" class="demo-form-inline">
				<el-form-item label="服务项目:">
					<el-input v-model="serviceform.serviceItem" placeholder="服务项目"></el-input>
				</el-form-item>
				<el-form-item label="服务分类">
					<el-select v-model="serviceform.typename" placeholder="请选择服务分类">
						<el-option v-for="item in Types" :value="item.typename">{{item.typename}}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商家名称:">
					<el-input v-model="serviceform.mname" placeholder="输入商家名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectServices()">筛选</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 分割线 -->
		<el-divider></el-divider>
		<div>
			<!-- 表格服务信息展示 -->
			<el-table :data="serviceList" border style="width: 100%">
				<el-table-column prop="id" label="服务编号"></el-table-column>
				<el-table-column prop="serviceItem" label="服务项目"></el-table-column>
				<el-table-column prop="merchant.name" label="商家名称"></el-table-column>
				<el-table-column prop="serviceType.typename" label="服务分类"></el-table-column>
				<el-table-column prop="originalPrice" label="原价(元)"></el-table-column>
				<el-table-column prop="presentPrice" label="现价(元)"></el-table-column>
				<el-table-column prop="content" label="服务介绍"></el-table-column>
				<el-table-column prop="createDate" label="创建时间"></el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button @click="selectServiceById(scope.row.id)" type="primary" size="mini">编辑</el-button>
						&nbsp;
						<el-popconfirm title="确定删除吗？" @confirm="deleteService(scope.row.id.toString())">
							<el-button slot="reference" type="primary" size="mini">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 
		发布服务对话框 
		-->
		<el-dialog title="发布服务" :visible.sync="addServicedialog">
			<i id="span1" class="el-icon-orange"> 添加</i>
			<el-divider></el-divider>
			<div id="add_div">
				<el-form id="add_elform" size="mini" ref="addServiceForm" :model="addServiceForm" label-width="80px">
					<el-form-item label="商家名称">
						<el-select v-model="addServiceForm.mname" placeholder="请选择商家">
							<el-option v-for="item in MerchantList" :value="item.name">{{item.name}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务分类">
						<el-select v-model="addServiceForm.typename" placeholder="请选择服务类别">
							<el-option v-for="item in Types" :value="item.typename">{{item.typename}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务项目">
						<el-input v-model="addServiceForm.serviceItem" placeholder="服务项目"></el-input>
					</el-form-item>

					<el-form-item label="原价">
						<el-input v-model="addServiceForm.originalPrice" placeholder="原价"></el-input>
					</el-form-item>
					<el-form-item label="现价">
						<el-input v-model="addServiceForm.presentPrice" placeholder="现价"></el-input>
					</el-form-item>
					<el-form-item label="服务介绍">
						<el-input type="textarea" v-model="addServiceForm.content" placeholder="服务介绍"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addService()">添加</el-button>
						<el-button @click="resertAddService()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>
		<!-- 
	修改服务 
	 -->
		<el-dialog title="修改服务" :visible.sync="updateServicedialog">
			<i id="span1" class="el-icon-orange"> 修改</i>
			<el-divider></el-divider>
			<div>
				<el-form size="mini" ref="updateServieForm" :model="updateServieForm" label-width="80px">
					<el-form-item label="服务编号">
						<el-input v-model="updateServieForm.id" :disabled='true'
							:value="updateServieForm.id"></el-input>
					</el-form-item>
					<el-form-item label="商家名称">
						<el-select v-model="updateServieForm.mid" placeholder="请选择商家">
							<el-option v-for="item in MerchantList" :label="item.name" :key="item.id"
								:value="item.id">{{item.name}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务分类">
						<el-select v-model="updateServieForm.typeid" placeholder="请选择服务分类">
							<el-option v-for="item in Types" :key="item.id" :value="item.id" :label="item.typename">
								{{item.typename}}
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务项目">
						<el-input v-model="updateServieForm.serviceItem" placeholder="服务项目"></el-input>
					</el-form-item>

					<el-form-item label="原价">
						<el-input v-model="updateServieForm.originalPrice" placeholder="原价"></el-input>
					</el-form-item>
					<el-form-item label="现价">
						<el-input v-model="updateServieForm.presentPrice" placeholder="现价"></el-input>
					</el-form-item>
					<el-form-item label="服务介绍">
						<el-input type="textarea" v-model="updateServieForm.content" placeholder="服务介绍"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="updateService()">修改</el-button>
						<el-button @click="resertUpdateService()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</el-dialog>

	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				serviceform: {
					serviceItem: '',
					typename: '',
					mname: ''
				},
				queryInfo: {
					pageNum: 1,
					pageSize: 4,
				},
				total: 0,
				serviceList: [],
				Types: [],
				name: "",
				typename: "",
				MerchantList: [],
				addServicedialog: false,
				updateServicedialog: false,
				addServiceForm: {
					mname: '',
					typename: '',
					serviceItem: '',
					originalPrice: 0,
					presentPrice: 0,
					content: ''
					// createDate: ''
				},
				updateServieForm: {
					mid: '',
					typeid: '',
					serviceItem: '',
					originalPrice: 0,
					presentPrice: 0,
					content: ''
				},
				formLabelWidth: '120px'
			}
		},
		beforeMount: function() {
			this.selectServices(); // 当前页面加载完，立马执行该方法
			this.selectAllTypes();
			this.selectMerchant();
		},
		methods: {
			/* 			 handleChangeMerchant(merchantId) {
						    console.log("Selected merchant ID:", merchantId);
						  }, */
			/* 分页查询所有 */
			async selectServices() {
				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum);
				param.append('pageSize', this.queryInfo.pageSize);
				param.append('serviceItem', this.serviceform.serviceItem);
				param.append('typename', this.serviceform.typename);
				param.append('mname', this.serviceform.mname);
				let res = await this.$http.post("selectServices", param);
				if (res.data.code == 400) { // 查询失败
					this.$message.error(res.data.msg);
					return;
				}
				// 查询成功
				if (res.data.code == 200) {
					this.serviceList = res.data.data.list;
					// 查询总条数，赋值给total
					this.total = res.data.data.total;
					this.pageNum = res.data.data.pageNum;
					this.pageSize = res.data.data.pageSize;
					this.serviceTypes = this.serviceList;
					this.serviceform.serviceItem = ''
					this.serviceform.typename = ''
					this.serviceform.mname = ''
					// console.log(this.serviceTypes);
				}
			},
			// 当每页显示的条数改变时，重新查询总数据
			handleSizeChange(size) { // size ： 改变后的每页展示的条数
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectServices();
			},
			// 根据不同的页码，来查询总数据
			handleCurrentChange(pn) { // pn 你要访问的页码
				this.queryInfo.pageNum = pn;
				this.selectServices();
			},
			/* 查询商户表的信息,需要使用到name */
			async selectMerchant() {
				var param = new URLSearchParams();
				param.append('pageNum', 1);
				param.append('pageSize', 100);
				let res = await this.$http.post("selectMem", param);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.MerchantList = res.data.data.list
					// console.log(this.MerchantList)
					// alert(this.MerchantList)
				}
			},
			/* 
			 添加服务信息(发布服务)
			 */
			async addService() {
				var param = new URLSearchParams();
				param.append('mname', this.addServiceForm.mname);
				param.append('serviceItem', this.addServiceForm.serviceItem);
				param.append('typename', this.addServiceForm.typename);
				param.append('originalPrice', this.addServiceForm.originalPrice);
				param.append('presentPrice', this.addServiceForm.presentPrice);
				param.append('content', this.addServiceForm.content);
				// param.append('createDate', this.addServiceForm.createDate);
				let res = await this.$http.post("addServices", param);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					// 5.调用查询所有的数据重新查询
					this.selectServices();
					// 6.关闭当前对话框并清空addUser中的数据			
					this.addServiceForm.mname = ''
					this.addServiceForm.serviceItem = ''
					this.addServiceForm.typename = ''
					this.addServiceForm.originalPrice = ''
					this.addServiceForm.presentPrice = ''
					this.addServiceForm.content = ''
					// this.addServiceForm.createDate = ''
					this.addServicedialog = false;
				}
			},
			// 取消发布服务信息
			resertAddService() {
				this.$refs['addServiceForm'].resetFields();
				this.addServiceForm.mname = ''
				this.addServiceForm.serviceItem = ''
				this.addServiceForm.typename = ''
				this.addServiceForm.originalPrice = ''
				this.addServiceForm.presentPrice = ''
				this.addServiceForm.content = ''
				// this.addServiceForm.createDate = ''
				this.addServicedialog = false;
			},
			// 取消修改服务信息
			resertUpdateService() {
				this.$refs['updateServieForm'].resetFields();
				// this.updateServieForm.id = ''
				this.updateServieForm.mname = ''
				this.updateServieForm.serviceItem = ''
				this.updateServieForm.typename = ''
				this.updateServieForm.originalPrice = ''
				this.updateServieForm.presentPrice = ''
				this.updateServieForm.content = ''
				this.updateServicedialog = false;
			},
			/* 删除服务信息 */
			async deleteService(id) {
				var param = new URLSearchParams();
				param.append('id', id);
				let res = await this.$http.post('deleteServiceById', param);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return;
				}
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					// 5.调用查询所有的数据重新查询
					this.selectServices();
				}
			},
			/* 通过服务编号查询服务信息 */
			async selectServiceById(id) {
				let res = await this.$http.get("selectServiceById?id=" + id)
				if (res.data.code == 200) {
					this.updateServieForm = res.data.data;
					this.updateServicedialog = true
				} else {
					this.$message.error('查无此数据!')
				}
			},
			/* 修改服务 */
			async updateService() {
				var param = new URLSearchParams();
				param.append('id', this.updateServieForm.id);
				param.append('mid', this.updateServieForm.mid);
				param.append('serviceItem', this.updateServieForm.serviceItem);
				param.append('typeid', this.updateServieForm.typeid);
				alert(this.updateServieForm.typeid)
				alert(this.updateServieForm.mid)
				param.append('originalPrice', this.updateServieForm.originalPrice);
				param.append('presentPrice', this.updateServieForm.presentPrice);
				param.append('content', this.updateServieForm.content);
				let res = await this.$http.post("updateServiceById", param)
				if (res.data.code == 200) {
					this.$message.success(res.data.msg);
					// 5.调用查询所有的数据重新查询
					this.selectServices();
					// 6.关闭当前对话框并清空数据			
					this.updateServieForm.mid = ''
					this.updateServieForm.id = ''
					this.updateServieForm.serviceItem = ''
					this.updateServieForm.typeid = ''
					this.updateServieForm.originalPrice = ''
					this.updateServieForm.presentPrice = ''
					this.updateServieForm.content = ''
					this.updateServicedialog = false;
				} else {
					this.$message.error('查无此数据!')
				}
			},
			// 查询所有的服务分类
			async selectAllTypes() {
				let res = await this.$http.get('selectTypes')
				if (res.data.code == 200) {
					this.Types = res.data.data;
				}
			}
		}
	}
</script>

<style>
	#but1 {
		float: left;
		margin-left: 0px;
	}

	#add_elform .el-form-item {
		/* width: 350px; */
	}

	#add_elform {}
</style>